<template>
	<view class="contain">
		<view class="bg " :style="{ background: color }">
			<view class="" style="height: 460rpx;position: relative;"><image :src="logo" class="logo-bg" mode=""></image></view>
		</view>
		<view class="box">
			<view class="item">
				<image src="../../static/images/zhanghao.png" mode="widthFix" style="40rpx"></image>
				<input type="text"  v-model="user" :placeholder="lang.login.inputUserName" />
			</view>
			<view class="item">
				<image src="../../static/images/mima.png" mode="widthFix"></image>
				<input type="password" v-model="pass" :placeholder="lang.login.password" />
			</view>
			<view class="btn" :style="{ background: color }" @tap="goFirst" hover-class="hover-opacity">{{ lang.login.login }}</view>
		</view>
		<view class="change-btn" @tap="changeLang">切换语言</view>
		<view class="content">
			<jiuaiCheckbox @change="changeBox" :checked="type" :fontSize="12" :color="color" :borderStyle="borderStyle"></jiuaiCheckbox>
			<view class="read">{{ lang.login.protocol }}</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import jiuaiCheckbox from '../../components/jiuai-checkbox/jiuai-checkbox.vue';
import Toast from '../../common/toast.js';
export default {
	data() {
		return {
			user: '',
			pass: '',
			type: true,
			color: '#005883',
			borderStyle: '1px solid #005883',
			logo: '',
			colors: ''
		};
	},
	components: {
		jiuaiCheckbox
	},
	computed: {
		...mapState(['lang', 'themeColors'])
	},
	onLoad() {
		console.log(this.lang);
		if (uni.getStorageSync('phone')) {
			this.user = uni.getStorageSync('phone');
		}
		if (uni.getStorageSync('password')) {
			this.pass = uni.getStorageSync('password');
		}
		if (uni.getStorageSync('logo')) {
			this.logo = uni.getStorageSync('logo');
		}
		if (uni.getStorageSync('themeColors')) {
			this.color = uni.getStorageSync('themeColors');
			this.$store.commit('setPermissions', uni.getStorageSync('themeColors'));
		}
	},
	methods: {
		...mapMutations(['changeLang']),
		changeBox(e) {
			console.log(e);
			this.type = e.detail.checked;
		},
		goFirst() {
			if (this.user == '') {
				//Toast.showToast("账号不能为空");
				Toast.showToast(this.lang.login.accountnotempty);
				return;
			}
			if (this.pass == '') {
				//Toast.showToast("密码不能为空");
				Toast.showToast(this.lang.login.passwordnotempty);
				return;
			}
			if (this.type == false) {
				//Toast.showToast("请勾选协议");
				Toast.showToast(this.lang.login.checkagreement);
				return;
			}
			//Toast.showLoading("连接中...");
			Toast.showLoading(this.lang.login.connecting);

			let data1 = {
				phone: this.user,
				password: this.pass,
				equipmentNumber: uni.getStorageSync('token')
			};
            
			this.$u.post('authc/api/user/login', data1).then(res => {
				console.log(res);
				Toast.hideLoading();
				if (res.code == 0) {
					uni.setStorageSync('password', data1.password);
					uni.setStorageSync('Authorization', 'Bearer'+ res.data.accessToken);
					uni.setStorageSync('head', res.data.userInfo.headImg);
					uni.setStorageSync('nickName', res.data.userInfo.nickName);
					uni.setStorageSync('phone', res.data.userInfo.phone);
					uni.setStorageSync('write', res.data.userInfo.autograph);
					uni.setStorageSync('userId', res.data.userInfo.userId);
					this.$store.commit('setPermissions', res.data.userInfo.isPass);
					if(res.data.userInfo.companyLogo && res.data.userInfo.companyLogo!=''){
						uni.setStorageSync('logo', res.data.userInfo.companyLogo);
						uni.setStorageSync('themeColors', res.data.userInfo.companyColor);
						this.$store.commit('setThemeColors', res.data.userInfo.companyColor);
					}
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					Toast.showToast(res.resultNote);
				}
			});
		}
	}
};
</script>
<style>
	page{
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.logo-bg {
	position: absolute;
	left: 50%;
	bottom:140rpx;
	transform: translateX(-50%);
	width: 440rpx;
	height:220rpx;
}
.change-btn {
	margin-top: 50upx;
	color: #2979ff;
	font-size: 26upx;
}
.contain {
	width: 100%;
	// min-height: 100vh;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.bg {
		width: 100%;
		height:500rpx;
	}

	.box {
		width: 92%;
		margin-top:-100rpx;
		padding: 28rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 8px;
		z-index: 10;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

		.item {
			width: 100%;
			padding: 36rpx 0;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			input {
				width: 70%;
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #333;
			}
		}

		.btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffffff;
			border-radius: 30px;
			background: #005883;
			margin: 100rpx 0 30rpx;
		}
	}

	.content {
		width: 92%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #333;
		position: absolute;
		left: 28rpx;
		bottom: 40rpx;

		.read {
			margin-left: 20upx;
		}
	}
}
</style>
